Vue Js v-show directive: Vue.js’s v-show directive allows for conditional rendering in templates. It toggles the visibility of an element based on a truthy or falsy expression. When the expression is true, the element is displayed; when false, it’s hidden. Unlike v-if, which completely removes the element from the DOM when false, v-show simply toggles its CSS display property. This makes v-show more efficient for frequently toggled elements but less so for complex components. It’s ideal for situations where you want to hide and show elements without incurring the overhead of adding/removing them from the DOM, providing a smooth user experience. 

How can I Vue Js show or hide an element

In this example, Vue.js is used to show or hide a paragraph element based on the value of the show data property. When the button with the “Toggle” text is clicked, it triggers the toggleElement method which toggles the value of the show property using the ! operator.

If show is true, the paragraph element with the text “font awesome icons” will be displayed using the v-show directive. If show is false, the element will be hidden.

So essentially, clicking the button will toggle the display of the paragraph element.

v-show toggles the visibility of an element using the CSS display property, while v-if conditionally renders elements by adding or removing them from the DOM. v-show keeps the element in the DOM and takes up space even when hidden, while v-if completely removes it from the DOM, saving memory.

Vue Js V Show Conditional Rendering Example

<div id="app">
    <p v-show="show">font awesome icons</p>
     <button @click="toggleElement">Toggle</button>
</div>
   <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    show: true
                }
            },
            methods: {
                toggleElement() {
                    this.show = !this.show
                }
            }
        });
 </script>

Output of Vue Js Show Hide Element

What is an example use case for the Vue.js v-show directive and how does it differ from the v-if directive?

The Vue.js v-show directive is used to conditionally toggle the visibility of elements without removing them from the DOM. In this example, the v-show directive is applied to the <h2> and <ul> elements, making them initially visible because showList is set to true. When you click the “Toggle List” button, the toggleList method changes the showList data property to false, hiding the list, or back to true, making it visible again.

The key difference from the v-if directive is that v-show simply toggles the CSS display property, while v-if completely removes or adds the element from/to the DOM. Therefore, v-show is more efficient when toggling visibility frequently, as it avoids expensive DOM manipulations. 

Vue Js v-show Example 2

<div id="app">
    <h3>Vue Js v-show Example</h3>
    <h2 v-show="showList">Shopping List</h2>
    <ul v-show="showList">
      <li>Apples</li>
      <li>Bananas</li>
      <li>Oranges</li>
    </ul>
    <button @click="toggleList">Toggle List</button>
</div>
 <script>
    new Vue({
      el: '#app',
      data() {
        return {
          showList: true
        };
      },
      methods: {
        toggleList() {
          this.showList = !this.showList;
        }
      }
    });
  </script>